<script setup lang="ts">
import CdlForm from "@/components/form";
import { useRoute, useRouter } from "vue-router";
import {ref} from "vue";
import type {FormTree} from "@/interfaces/components/Form";
import type {FormData} from "@/interfaces/components/Page";
import type { Authentication, Shipper } from "@/interfaces/views/vehicle/shipper";
import type {Project} from "@/interfaces/views/project/project";
import {
  useGetShipperInfoApi,
  useShipperInsertApi,
  useShipperUpdateApi
} from "@/api/vehicle/shipper";
import { mergeObjects } from "@/utils/utilities";
import { ElMessage } from "element-plus";
import constant from "@/utils/constant";

const router = useRouter()
const route = useRoute()
if(route.query.id) initData()

const basicFormTree: FormTree<Shipper> = [
    [
      {label: "托运联系人姓名", component: "input", prop: "contact", rule: [
          {required: true, message: '必须填写托运联系人姓名', trigger: 'blur'},
          {min: 2, max: 18, message: '托运联系人姓名应该在2-18个字符之间', trigger: 'blur'},
        ]},
      {label: "托运联系人手机号", component: "input", prop: "mobile", rule: [
          {required: true, message: '必须填写托运联系人手机号', trigger: 'blur'},
          { pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
            , message: '请输入正确电话号码'}
        ]},
      {label: "认证状态", component: "tag", prop: "status", dict: "shipper_status"},
    ],
    [
      {label: "登录密码", component: "input", prop: "password", placeholder: "默认手机号后四位", rule: [
        {min: 4, max: 12, message: '密码应该在4-12个字符之间', trigger: 'blur'},
      ], enable: !route.query.id},
    ],
    [
      {label: "备注", component: "input", prop: "remark", type: "textarea", max: 200},
    ]
]
const authFormTree: FormTree<Authentication> = [
    [
      {label: "托运人(企业)全称", component: "input", prop: "name", rule: [
          {required: true, message: '必须填写托运人(企业)全称', trigger: 'blur'}
        ]},
      {label: "统一社会信用代码或个人证件号", component: "input", prop: "idNum", rule: [
          {required: true, message: '必须填写司机身份证', trigger: 'blur'},
          {pattern: /(^\d{6}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[1-2][0-9]|3[0-1])\d{3}(\d|X)$)/,
            message: "请输入正确的身份证"}
        ], labelWidth: 220},
      {}
    ],
    [
      {label: "企业法人姓名", component: "input", prop: "legalPerson", rule: [
          {required: true, message: '必须填写企业法人姓名', trigger: 'blur'}
        ]},
      {label: "企业法人联系方式", component: "input", prop: "legalPersonPhone", rule: [
          {required: true, message: '必须填写企业法人联系方式', trigger: 'blur'},
          {pattern: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/,
            message: '请输入正确联系方式'}
        ]},
      {label: "企业通信地址", component: "input", prop: "address", rule: [
          {required: true, message: '必须填写企业通信地址', trigger: 'blur'},
          {min: 2, max: 32, message: '企业通信地址应该在2-32个字符之间', trigger: 'blur'}
        ]},
    ],
    [
      {label: "法人身份证(正面)", component: "upload", prop: "legalPersonIdCardImg", rule: [
          {required: true, message: '必须上传法人身份证(正面)', trigger: 'blur'}
        ], action: constant.uploadUrl},
      {label: "营业执照", component: "upload", prop: "businessLicenseImg", rule: [
          {required: true, message: '必须上传营业执照', trigger: 'blur'}
        ], action: constant.uploadUrl},
      {label: "托运联系人身份证(正面)", component: "upload", prop: "contactIdCardImg", rule: [
          {required: true, message: '必须上传托运联系人身份证(正面)', trigger: 'blur'}
        ], action: constant.uploadUrl, labelWidth: 180},
    ]
]

const projectFormTree: FormTree<Project> = [
    [
      {label: "项目类型", component: "input"},
      {label: "单趟运费收入", component: "input"},
      {}
    ],
    [
      {label: "货物名称", component: "input"},
      {label: "货物毛重", component: "input"},
      {label: "货物种类", component: "input"},
    ],
    [
      {label: "装货点", component: "input"},
      {label: "卸货点", component: "input"},
      {label: "货物分类代码", component: "input"},
    ]
]

const basicData = ref<FormData<Shipper>>({
  id: undefined,
  contact: "",
  mobile: "",
  password: "",
  status: 1,
  remark: ""
})
const authenticationData = ref<FormData<Authentication>>({
  name: "",
  idNum: "",
  legalPerson: "",
  legalPersonPhone: "",
  address: "",
  legalPersonIdCardImg: "",
  businessLicenseImg: "",
  contactIdCardImg: ""
})
const projectData = ref({})
const basicRef = ref()
const authRef = ref()
const projectRef = ref()

/**
 * 初始化数据
 */
function initData(){
  useGetShipperInfoApi(route.query.id as string).then(res =>{
    mergeObjects(basicData.value, res.data)
    mergeObjects(authenticationData.value, res.data)
  })
}

/**
 * 提交
 */
async function submit(){
  const basic = await basicRef.value.parentSubmit()
  let authentication = {}
  if(basicData.value.status === 2) authentication = await authRef.value.parentSubmit()
  const data: {[key: string]: any} = {}
  Object.assign(data, basic, authentication)
  if(route.query.id) {
    useShipperUpdateApi(data).then(()=> {
      ElMessage.success("修改成功！自动返回上一页")
      fallbackPage()
    })
  }else {
    useShipperInsertApi(data).then(()=> {
      ElMessage.success("新增成功！自动返回上一页")
      fallbackPage()
    })
  }
}
/**
 * 回退页面
 */
function fallbackPage(){
  router.back()
}
</script>

<template>
  <el-card style="position: relative">
    <button class="back_btn" @click="fallbackPage"></button>
    <h1 class="top_line">基础信息</h1>
    <el-divider></el-divider>
    <CdlForm :model="basicData" :template-tree="basicFormTree" ref="basicRef" label-width="150"></CdlForm>
    <div v-show="basicData.status === 2">
      <h1>认证信息</h1>
      <el-divider></el-divider>
      <CdlForm :model="authenticationData" :template-tree="authFormTree" ref="authRef" label-width="150"></CdlForm>
    </div>
<!--    <h1>默认项目信息</h1>-->
<!--    <el-divider></el-divider>-->
<!--    <CdlForm :model="projectData" :template-tree="projectFormTree" ref="projectRef" label-width="150"></CdlForm>-->
    <div class="footer_btn">
      <el-button type="primary" @click="submit">提交</el-button>
      <el-button @click="fallbackPage">取消</el-button>
    </div>
  </el-card>
</template>
